<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0px;
        height: 100vh;
        width: 100%;
        font-family:Helvetica ;
        position: relative;
        overflow-y: hidden;
    }
    .container{
        width:100%;
    }
    /* 头部样式 */
    .header{
        height: 62px;
        box-shadow: 5px 5px 5px rgb(229, 231, 234);
    }
    .icon1{
        width: 13px;
        width: 17px;
        margin: 20px;
        cursor: pointer;
    }
    .title{
        position: relative;
    }
    .icon::after{
        content: " ";
        width: 1px;
        background-color: rgb(241, 239, 239);
        height: 85%;
        position: absolute;
        left: 55px;
        top: 7%;
        transform: scale(1,0.5);
    }
    .name{
        font-size: 16px;
    }
    .tea-mname{
        margin: 20px;
        cursor: pointer;
    }
    .arrow{
        margin-top: 6px;
        margin-left: 6px;
    }
    .arrow1{
        width: 16px;
        height: 16px;
    }
    .image{
        width: 31px;
        height: 31px;
        border-radius: 50%;
        color: white;
        font-size: 1px;
        text-align: center;
        line-height: 31px;
        background-color:rgb(149, 49, 199) ;
        margin: 20px;
    }
    .drop{
        position: relative;
    }
    .drop-down{
        font-size: 14px;
    }
    .drop-down::after{
        content: " ";
        width: 1px;
        background-color: rgb(241, 239, 239);
        position: absolute;
        height: 90%;
        right: 70px;
        top: 10%;
        transform: scale(1,0.5);
    }
    .drop-down:hover{
        text-decoration-line: underline;
        cursor: pointer;
    }
    .header{
        display: flex;
        justify-content: space-between;
    }
    .title,
    .drop,
    .tea-mname{
        display: flex;
        align-items: center;
    }
    /* 内容框内样式 */
    .content{
        margin-top: 5px;
        display: flex;
    }
    /* 左边选项栏样式 */
    .left{
        width: 240px;
        height: 100vh;
        background-color: rgb(249, 250, 251);
    }
    .return1{
        width: 17px;
        height: 18px;
        margin-left: 18px;
        margin-right: 10px;
        margin-top: 7px;
    }
    .text{
        color: rgb(96, 98, 106);
        letter-spacing: 1px;
    }
    .team1{
        width: 17px;
        height: 18px;
        margin-left: 18px;
        margin-right: 10px;
        margin-top: 6px;
    }
    .left div:nth-child(1),
            :nth-child(2){
                display: flex;
                justify-content:flex-start ;
            }
    .left div:nth-child(3){
        color: white;
        letter-spacing: 1px;
        background-color: rgb(40, 120, 255);
    }
    .menu-item{
        margin: 0px 18px;
        margin-top: 8px;
        width: 200px;
        height: 36px;
        border-radius: 5px;
        line-height: 36px;
        cursor:pointer;
        font-size: 14px;
    }
    .active:hover{
        color:rgb(40, 120, 255) ;
    }
    span{
        padding-left: 45px;
    }
    .doubt{
        width: 38px;
        height: 38px;
        line-height: 38px;
        justify-content: center;
        border-radius: 50%;
        background-color: white;
        font-size: 26px;
        color: black;
        position: absolute;
        bottom: 63px;
        left: 26px;
        cursor: pointer;
    }
    /* 右边选项栏样式  */
    .right{
        width: 100%;
    }
    /* 右边上半部分内容 */
    .information,
    .item{
        display: flex;
        justify-content: space-between;
        margin-top: 15PX;
    }
    .information{
        margin-top: 10px;
    }
    .user{
        margin-left:30px ;
        font-size: 17px;
        font-weight: bold;   
        margin-top: 22PX;     
    }
    .group{
        font-size: 14px;
        color: rgb(183, 183, 183);
        width: 91px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        border-radius: 5px;
        margin-right: 10px;
        border: 1px solid rgba(31,33,38,.12);
    }
    .modify1{
        font-size: 14px;
        color: rgb(183, 183, 183);
        width: 120px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        border-radius: 5px;
        margin-right: 10px;
        border: 1px solid rgba(31,33,38,.12);
    }
    .invite{
        font-size: 14px;
        color: white;
        background-color: rgb(40, 120, 255);
        width: 87px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 5px;
        margin-right: 30px;
        cursor:pointer;
    }
    .invite:hover{
        background-color:rgb(80, 153, 255);
    }
    /* 右侧中间部分 */
    .right-middle{
        display: flex;
    }
    /* 中间部左侧 */
    .middle-left{
        width: 293px;
        height: 77vh;
        margin-top: 46px;
        margin-left: 30px;
    }
    .label{
        display: flex;
        align-items: center;
        position: relative;
    }
    .user-group::after{
        content: " ";
        height: 1px;
        background-color: rgb(40, 120, 255);
        width: 15%;
        position: absolute;
        top: 42px;
        left: 7%;
    }
    .user-group,
    .organization{
        font-size: 14px;
        cursor: context-menu;
    }
    .user-group{
        margin-left: 18px;
    }
    .organization{
        color: rgba(31,33,38,.3);
        margin-left: 32px;
    }
    .retract1{
        width: 11px;
        height: 11px;
        margin-left: 131px;
        cursor: pointer;
    }
    .group-box{
        height: 100%;
        border-radius: 4px;
        box-sizing: border-box;
        border: 1px solid rgb(210, 212, 215);
        padding: 13px 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin-top: 24px;
    }
    .add{
        height: 36px;
        border-radius: 4px;
        border: 1px solid rgb(210, 212, 215);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        line-height: 36px;
        color: #2878ff;
        margin-left:12px ;
        margin-right:12px ;
        cursor: pointer;
    }
    .add:hover{
        background-color: rgb(237, 240, 243);
    }
    .icon2{
        font-size: 26px;
        margin-right: 3px;
        
    }
    .group1,
    .group2{
        font-size: 14px;
        width: 237px;
        height: 22px;
        line-height: 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 14px;
        border-radius: 5px;
        cursor: pointer;        
    }
    .group1{
        background-color: rgb(237,240,243);
        margin: 12px 12px;
    }
    .group2{
        margin: -9px 12px;
    }
    .group2:hover{
        background-color: rgb(237,240,243);
    }
    /* 中间部分右侧 */
    .middle-right{
        width: 100%;
        height: 84vh;
        margin-left: 10px;
        margin-right: 25px;
        display: flex;
        flex-direction: column;
        box-shadow: 0px 6px 4px -5px rgb(229, 231, 234);;
    }
    .search-name,
    .Text,
    .search-botton{
        font-size: 14px;
    }
    .Text{
        margin-top: 2px;
        color: rgb(117,117,117);
    }
    .search-image1{
        width: 15px;
        height: 15px;
    }
    .search-icon1{
        width: 14px;
        height: 15px;
    }
    .search-image{
        margin-left: 9px;
        margin-right: 7px;
        margin-top: 6px;
    }
    .box,
    .search-box,
    .box2{
        display: flex;
        align-items: center;
    }
    .box2:hover{
        background-color: rgb(242, 244, 247);
    }
    .search{
        height: 27px;
        display: flex;
        justify-content: space-between;
        margin-top: 48px;
        padding-left: 12px;
    }
    .search-box{
        width: 240px;
        height: 34px;
        line-height: 34px;
        border: 1px solid rgb(210, 212, 215);
        box-sizing: border-box;
        border-radius: 6px;
    }
    .search-box:hover{
        border: 1px solid rgb(40, 120, 255);
    }
    .search-botton{
        margin-left: 10px;
    }
    .search-icon{
        margin-left: 40px;
    }
    .wrapper{
        margin-top: 15px;
        display: flex;
        flex-direction: column;
    }
    .wrapper-box1{
        font-size: 15px;
        font-weight:bold;
        height: 43px;
        background-color: rgb(249, 250, 251);
        display: flex;
        align-items: center;
        border-bottom:1px solid rgb(241, 239, 239);       
    }
    .top,
    .bottom{
        width: 9px;
        height: 9px;
    }
    .role-icon1{
        width: 21px;
        height: 21px;
        border-radius: 50%;
        margin-top: 3px;
        margin-left: 6px;
    }
    .role{
        padding-left: 13px;
    }
    .wrapper-image{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 9px;
    }
    .wrapper-name,
    .wrapper-time,
    .wrapper-role{
        display: flex;
        align-items: center;
    }
    .checkbox{
        width: 36px;
        margin-left: 4px;
    }
    input{
        cursor: pointer;
    }
    .wrapper-group{
        width: 340px;
        margin-right: 0px 5px;
    }
    .wrapper-time{
        width: 258px;
        margin:0px 5px;
    }
    .wrapper-role{
        width: 174px;
        margin:0px 10px;
    }
    .wrapper-invite{
        width: 280px;
        margin:0px 5px;
    }
    .wrapper-state{
        width: 158px;
        margin:0px 5px;
    }
    .wrapper-name{
        margin-left: 30px;
        flex: 1;
    }
    /* 右侧中间第二行 */
    .wrapper-box2{
        height: 50px;
        border-bottom:1px solid rgb(241, 239, 239);
        display: flex;
        align-items: center;
    }
    .wrapper-box2:hover{
        background-color: rgb(245, 247, 250);
    }
    .pointer{
        cursor: pointer;
    }
    .wrapper-box2{
        font-size: 15px;
        font-weight: 500;
        align-items: center;
    }
    .wrapper-image1{
        font-size: 1px;
        font-weight: inherit;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        text-align: center;
        background-color: rgb(113, 188, 120);
        color: white;
        margin-right: 9px;
        cursor: context-menu;
    }
    .wrapper-image2{
        font-size: 5px;
        width: 25px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        background-color: #2878ff;
        border-radius: 28px;
        color: #fff;
        margin-left: 5px;
    }
    .wrapper-name3{
        display: flex;
        align-items: center;
        flex: 1;
        margin-left: 27px;
    }
    .wrapper-box2  .wrapper-state{
        display: flex;
        align-items: center;
    }
    .wrapper-box2 .wrapper-role{
        position: relative;
        left: 13px;
    }
    .wrapper-name2{
        font-size: 15px;
        font-weight:bold;
    }
    .state-icon{
        width: 5px;
        height: 5px;
        background-color: #22ab68;
        border-radius: 3px;
        margin-right: 3px;
    }
    .state{
        margin-left: 3px;
    }
    /* 页脚样式 */
    .right-buttom{
        width: 100%;
        justify-content: space-between;
        margin-top: 18px;
        margin-right: 8px;
        
    }
    .page-item{
        font-size: 14px;
        color: rgb(108, 108, 109);
        margin-left: 337px;
    }
    .turn-left1,
    .turn-right1{
        width: 12px;
        height: 12px;
    }
    .page-number{
        font-size: 16px;
        width: 28px;
        height: 28px;
        line-height: 30px;
        text-align: center;
        justify-content: center;
        border-radius: 5px;
        border: 1px solid rgb(40, 120, 255);
        color: rgb(40, 120, 255);
        margin-left: 7px;
    }
    .turn-left,
    .turn-right{
        width: 28px;
        height: 28px;
        line-height: 34px;
        text-align: center;
        border-radius: 5px;
        border: 1px solid rgb(210, 212, 215);
        margin-left: 7px;
    }
    select{
    width:105px;
    height: 31px;
    border-radius: 5px;
    color:rgb(108, 108, 109) ;
    border: 1px solid rgb(210, 212, 215);
    margin-left: 7px;
    margin-right: 28px;
    font-size: 14px;
    padding: 0px 13px
}
.right-buttom,
.page{
    display: flex;
    align-items: center;
}
</style>

<body>
    <div class="container">
        <!-- 头部 -->
        <div class=" header">
            <div class="title">
                <div class="icon"><img class="icon1" src="resource/th.jpg" ></div>
                <div class="tea-mname">
                    <div class="name">微信用户fw55的团队</div>
                    <div class="arrow"><img class="arrow1" src="resource/下箭头.png" ></div>
                </div>          
            </div>
            <div class="drop">
                <div class="drop-down">回到蓝湖</div>
                <div class="image">微信</div>
            </div>
        </div>
        <!-- 内容区 -->
        <div class="content">
            <!-- 左边选项栏 -->
            <div class="left">
                <div class="menu-item">
                    <div class="return"><img class="return1" src="resource/返回图标.png"></div>
                    <div class="text active">回到蓝湖</div>
                </div>
                <div class="menu-item ">
                    <div class="team"><img class="team1" src="resource/成员图标.png"></div>
                    <div class="text">团队管理</div>
                </div>
                <div class="menu-item">
                    <span>成员管理</span>
                </div>
                <div class="menu-item active">
                    <span>用户组管理</span>
                </div>
                <div class="menu-item active">
                    <span>席位管理</span>
                </div>
                <div class="menu-item active">
                    <span>成员加入审批</span>
                </div>                
                <div class="menu-item active"">
                    <span>团队设置</span>
                </div>               
            </div>
            <div class="doubt">?</div>
            <!-- 右边内容栏 -->
            <div class="right">
                <!-- 右边上半部分内容 -->
                <div class="information">
                    <div class="user">成员信息</div>
                    <div class="item">
                        <div class="tab">
                        <input class="group" type="text" value="添加至用户组">
                        </div>
                        <div class="modify">
                            <input class="modify1" type="text" value="批量修改团队角色">
                        </div>
                        <div class="invite">邀请成员</div>
                    </div> 
                </div>
                <!-- 右边中间部分内容 -->
                <div class="right-middle">
                    <!-- 中间部左侧 -->
                    <div class="middle-left">
                        <div class="label">
                            <div class="user-group">用户组</div>
                            <div class="organization">组织架构</div>
                            <div class="retract">
                                <img class="retract1" src="resource/左侧双箭头1.png">
                            </div>
                        </div>
                        <div class="group-box">
                            <div class="add">
                                <div class="icon2">+</div>
                                <div class="daaname">新建用户</div>
                            </div> 
                            <div class="group1">
                                <div class="item1">全部成员</div>
                                <div class="number1">1</div>
                            </div>
                            <div class="group2">
                                <div class="item2">未分组</div>
                                <div class="number2">1</div>
                            </div>
                        </div>
                    </div>
                    <!-- 中间部右侧 -->
                    <div class="middle-right">
                        <div class="search">
                            <div class="search-name">当前视图：全部成员</div>
                            <div class="box">
                                <div class="search-box">
                                    <div class="search-image">
                                        <img class="search-image1" src="resource/搜索.png">
                                    </div>
                                    <div class="Text">搜索成员</div>
                                </div>
                                <div class="box2">
                                    <div class="search-icon">
                                    <img class="search-icon1" src="resource/筛选.png">
                                    </div>
                                    <div class="search-botton">筛选</div>
                                </div>
                        </div>
                        
                        </div>
                        <div class="wrapper">
                            <div class="wrapper-box1">
                                <div class="checkbox">
                                    <input type="checkbox">
                                </div>
                                <div class="wrapper-name pointer">
                                    <div class="wrapper-name1">姓名</div>
                                    <div class="wrapper-image">
                                        <img class="top" src="resource/上箭头.png">
                                        <img class="bottom" src="resource/下箭头(1).png" >
                                    </div>
                                </div>
                                <div class="wrapper-group">所属用户值</div>
                                <div class="wrapper-time pointer">
                                    <div class="wrapper-lasttime">最后操作时间</div>
                                    <div class="wrapper-image">
                                        <img class="top" src="resource/上箭头.png">
                                        <img class="bottom" src="resource/下箭头(1).png" >
                                    </div>
                                </div>
                                <div class="wrapper-role pointer">
                                    <div class="role">角色</div>
                                    <div class="role-icon">
                                        <img class="role-icon1" src="resource/感叹号中.png">
                                    </div>
                                </div>
                                <div class="wrapper-invite">邀请人</div>
                                <div class="wrapper-state">激活状态</div>
                            </div>
                            <div class="wrapper-box2">
                                <div class="checkbox">
                                    <input type="checkbox">
                                </div>
                                <div class="wrapper-name3">
                                    <div class="wrapper-image1">微信</div>
                                    <div class="wrapper-name2">微信用户fwS5</div>
                                    <div class="wrapper-image2">我</div>
                                </div>
                                <div class="wrapper-group">未分组</div>
                                <div class="wrapper-time">2023-08-25</div>
                                <div class="wrapper-role">所有者</div>
                                <div class="wrapper-invite">-</div>
                                <div class="wrapper-state">
                                    <div class="state-icon"></div>
                                    <div class="state">已激活</div>
                                </div>
                            </div>
                        </div>
                    </div> 
                </div>
                <!-- 右侧脚部 -->
                <div class="right-buttom">
                    <div class="page-item">当前显示1-1数据,共一条</div>
                    <div class="page">
                        <div class="turn-left">
                            <img class="turn-left1" src="resource/向左箭头.png">
                        </div>
                        <div class="page-number">1</div>
                        <div class="turn-right">
                            <img class="turn-right1" src="resource/向右箭头.png">
                        </div>
                        <div class="page-total">
                            <select>
                                <option value="1">20条/页</option>
                            </select>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</body>
</html>